<template>
    <div>
        <Tabs v-model="tab">
            <TabPane label="未处理" name="tab_unread">
                <!--搜索表单-->
                <div>
                    <Form ref="search" :model="search" inline :label-width="60">
                        <FormItem prop="userName" label="住户">
                            <Input type="text" v-model="search.userName" placeholder="住户">
                            </Input>
                        </FormItem>
                        <FormItem prop="title" label="标题">
                            <Input type="text" v-model="search.title" placeholder="标题">
                            </Input>
                        </FormItem>
                        <DatePicker v-model="search.dates" format="yyyy/MM/dd" type="daterange" placement="bottom-end"
                                    placeholder="选择入档日期范围" style="width: 200px;margin-left: 40px;"></DatePicker>
                        <FormItem prop="field" label="排序项">
                            <Select v-model="search.field" style="width: 180px">
                                <i-option value="messageId">编号</i-option>
                                <i-option value="userName">住户</i-option>
                                <i-option value="createTime">入档时间</i-option>
                            </Select>
                        </FormItem>
                        <FormItem prop="isAsc" label="排序">
                            <Select v-model="search.isAsc" style="width: 180px">
                                <i-option :value="1">正序</i-option>
                                <i-option :value="0">倒序</i-option>
                            </Select>
                        </FormItem>
                    </Form>
                </div>
                <!--表头操作按钮-->
                <div class="mb20">
                    <Button type="error" :disabled="del_disabled" icon="md-trash" @click="deleteList" class="ml20">删除</Button>
                    <Button type="success" icon="ios-cloud-download-outline" @click="exportExcel" class="ml20">导出</Button>
                    <Button type="primary" icon="ios-search" @click="searchSubmit" class="ml20">搜索</Button>
                    <Button icon="md-refresh" @click="handleReset" class="ml20">Reset</Button>
                </div>
                <Table border  :columns="columns" :data="data" :loading="loading"
                       @on-select="on_select" @on-select-cancel="on_select_cancel"
                       @on-select-all="on_select_all" @on-select-all-cancel="on_select_all_cancel">
                    <!--使用插槽处理自定义渲染的数据-->
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="info" icon="md-create" size="small" @click="showModal(row)">处理</Button>
                        <Button type="success" icon="md-checkmark-circle-outline" size="small"
                                @click="updateReadStatus(row.messageId)" class="ml10">已读</Button>
                    </template>
                </Table>
                <Page :total="pageData.totalElements" :page-size="pageSize" show-elevator show-total @on-change="change"
                      class-name="page-style"></Page>
            </TabPane>
            <TabPane label="已处理" name="tab_all">
                <!--搜索表单-->
                <div>
                    <Form ref="search" :model="search2" inline :label-width="60">
                        <FormItem prop="userName" label="住户">
                            <Input type="text" v-model="search2.userName" placeholder="住户">
                            </Input>
                        </FormItem>
                        <FormItem prop="title" label="标题">
                            <Input type="text" v-model="search2.title" placeholder="标题">
                            </Input>
                        </FormItem>
                        <DatePicker v-model="search2.dates" format="yyyy/MM/dd" type="daterange" placement="bottom-end"
                                    placeholder="选择入档日期范围" style="width: 200px;margin-left: 40px;"></DatePicker>
                        <FormItem prop="field" label="排序项">
                            <Select v-model="search2.field" style="width: 180px">
                                <i-option value="messageId">编号</i-option>
                                <i-option value="userName">住户</i-option>
                                <i-option value="createTime">入档时间</i-option>
                            </Select>
                        </FormItem>
                        <FormItem prop="isAsc" label="排序">
                            <Select v-model="search2.isAsc" style="width: 180px">
                                <i-option :value="1">正序</i-option>
                                <i-option :value="0">倒序</i-option>
                            </Select>
                        </FormItem>
                    </Form>
                </div>
                <!--表头操作按钮-->
                <div class="mb20">
                    <Button type="error" :disabled="del_disabled2" icon="md-trash" @click="deleteList2" class="ml20">删除</Button>
                    <Button type="success" icon="ios-cloud-download-outline" @click="exportExcel2" class="ml20">导出</Button>
                    <Button type="primary" icon="ios-search" @click="searchSubmit2" class="ml20">搜索</Button>
                    <Button icon="md-refresh" @click="handleReset2" class="ml20">Reset</Button>
                </div>
                <Table border  :columns="columns2" :data="data2" :loading="loading"
                       @on-select="on_select2" @on-select-cancel="on_select_cancel2"
                       @on-select-all="on_select_all2" @on-select-all-cancel="on_select_all_cancel2">
                </Table>
                <Page :total="pageData2.totalElements" :page-size="pageSize2" show-elevator show-total @on-change="change2"
                      class-name="page-style"></Page>
            </TabPane>
        </Tabs>
        <!--添加弹窗-->
        <Modal :closable=false
               title="发送提醒消息"
               v-model="modal_add"
               ok-text="确定"
               @on-ok="handleSubmit()"
               class-name="vertical-center-modal">
            <div>
                <Alert show-icon class="mb20">
                    给住户 {{formAdd.userName}} 发送提醒
                </Alert>
                <Form ref="formAdd" :model="formAdd" :rules="ruleInline">
                    <FormItem prop="title" label="消息标题">
                        <Input type="text" v-model="formAdd.title" placeholder="请输入消息标题"></Input>
                    </FormItem>
                    <FormItem prop="content" label="消息内容">
                        <Input type="textarea" v-model="formAdd.content" placeholder="请输入消息内容"></Input>
                    </FormItem>
                </Form>
            </div>
        </Modal>

    </div>
</template>

<script>
    import {dateToString, downloadExcel, exportExcel, showDate} from "../utils/util";

    export default {
        name: "Message",
        data() {
            return {
                tab: 'tab_unread',
                loading: false,  //是否显示表格加载
                del_disabled: true,
                isSearch: false,   //当前是不是搜索模式
                data: [],
                current: 1,
                pageSize: 5,
                pageData: [],
                columns: [
                    {
                        type: 'selection',  //可以选择的一项
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'messageId',
                        sortable: true,
                        width: 100
                    },
                    {
                        title: '住户编号',
                        key: 'userId',
                        width: 100
                    },
                    {
                        title: '住户',
                        key: 'userName',
                        width: 100
                    },
                    {
                        title: '消息标题',
                        key: 'title',
                    },
                    {
                        title: '消息内容',
                        key: 'content',
                    },
                    {
                        title: '入档时间',
                        key: 'createTime',
                        width: 180
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 180
                    }
                ],
                selectIds: [],     //表格中的选中项的Id
                search: {
                    userName: '',
                    title: '',
                    dates: [],
                    status: '0',
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                },
                formAdd: {
                    messageId: undefined,
                    userId: undefined,
                    userName: undefined,
                    title: undefined,
                    content: undefined
                },
                modal_add: false,
                ruleInline: {
                    title: [
                        {required: true, message: '消息标题不能为空', trigger: 'blur'}
                    ],
                    content: [
                        {required: true, message: '消息内容不能为空', trigger: 'blur'}
                    ]
                },

                //tab2的数据
                del_disabled2: true,
                isSearch2: false,   //当前是不是搜索模式
                data2: [],
                current2: 1,
                pageSize2: 5,
                pageData2: [],
                columns2: [
                    {
                        type: 'selection',  //可以选择的一项
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '编号',
                        key: 'messageId',
                        sortable: true,
                        width: 100
                    },
                    {
                        title: '住户编号',
                        key: 'userId',
                        width: 100
                    },
                    {
                        title: '住户',
                        key: 'userName',
                        width: 100
                    },
                    {
                        title: '消息标题',
                        key: 'title',
                    },
                    {
                        title: '消息内容',
                        key: 'content',
                    },
                    {
                        title: '入档时间',
                        key: 'createTime',
                        width: 180
                    }
                ],
                selectIds2: [],     //表格中的选中项的Id
                search2: {
                    userName: '',
                    title: '',
                    dates: [],
                    status: '1',
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                }
            }
        },
        created() {
            this.query()
            this.query2()
        },
        methods: {
            query() {
                this.loading = true  //显示表格加载动画
                this.request({
                    url: '/message/backend/unread',
                    method: 'get',
                    params: {page: this.current, size: this.pageSize}
                }).then(res => {
                    this.data = res.data.content
                    this.pageData = res.data
                }).finally(() => {
                    this.loading = false
                })
            },
            change(current) {
                this.current = current;
                this.refreshData();
            },
            refreshData() {
                //刷新数据
                //判断当前页面是不是搜索模式
                if (this.isSearch) {
                    this.querySearch();
                } else {
                    this.query();
                }
            },
            on_select(selection, row) {
                this.selectIds.push(row.messageId)
                this.del_disabled = false //去掉删除按钮的禁用状态
            },
            on_select_cancel(selection, row) {
                this.selectIds.forEach((t, index, arr) => {
                    if (row.messageId === t) {
                        arr.splice(index, 1);    //删除取消的选项
                    }
                })
                if (this.selectIds.length === 0) {
                    this.del_disabled = true //删除按钮的禁用状态
                }
            },
            on_select_all(selection) {
                selection.forEach((t, index, arr) => {
                    this.selectIds.push(t.messageId)
                })
                this.del_disabled = false //去掉删除按钮的禁用状态
            },
            on_select_all_cancel(selection) {
                this.selectIds = []
                this.del_disabled = true //删除按钮的禁用状态
            },
            deleteList() {
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }

                this.$Modal.confirm({
                    title: '提醒',
                    content: '确定要删除所选中的所有出入记录数据？',
                    onOk: () => {
                        this.loading = true
                        this.request({
                            url: '/message/list',
                            method: 'delete',
                            params: {ids: this.selectIds},
                            paramsSerializer: params => {
                                return this.$qs.stringify(params, {indices: false})
                            }
                        }).then(res => {
                            this.$Message.info(res.msg);
                            this.refreshData(); //更新当前页面
                        }).finally(() => {
                            this.loading = false
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消删除');
                    }
                });
            },
            //重置按键
            handleReset() {
                this.search = {
                    userName: '',
                    title: '',
                    dates: [],
                    status: '0',
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                }
                //重置页面
                this.isSearch = false
                this.current = 1
                this.query()
            },
            searchSubmit() {
                //条件搜索
                this.current = 1
                this.isSearch = true
                this.querySearch();
            },
            querySearch() {
                this.loading = true
                let dates = this.search.dates
                if (dates.length < 2) {
                    this.search.dates = ['', '']
                }
                if (dates.length === 2) {
                    this.search.dates = [dateToString(dates[0]), dateToString(dates[1])]
                }
                this.search.page = this.current
                this.search.size = this.pageSize

                this.request({
                    url: '/message/search',
                    method: 'get',
                    params: this.search,
                    paramsSerializer: params => {
                        return this.$qs.stringify(params, {indices: false})
                    }
                }).then(res => {
                    this.data = res.data.content
                    this.pageData = res.data
                    // console.log(this.data)
                }).finally(() => {
                    this.loading = false
                })
            },
            exportExcel(){
                let content = this.selectIds.length === 0 ? '确定要导出所有的数据？或者去勾选数据项？' : '确定要导出所勾选的数据项？'
                this.$Modal.confirm({
                    title: '提醒',
                    content: content,
                    onOk: () => {
                        this.request({
                            url: '/message/export/excel',
                            method: 'get',
                            responseType: 'blob',
                            params: {ids: this.selectIds,isUnread:true},
                            paramsSerializer: params => {
                                return this.$qs.stringify(params, {indices: false})
                            }
                        }).then(res => {
                            downloadExcel(res);
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                });
            },
            updateReadStatus(id){
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }

                this.$Modal.confirm({
                    title: '提醒',
                    content: '确定将此消息标为已读？',
                    onOk: () => {
                        this.request({
                            url: '/message/read',
                            method: 'post',
                            params: {messageId: id}
                        }).then(res => {
                            this.$Message.info(res.msg);
                            this.refreshData();
                            this.refreshData2();
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                });
            },
            showModal(row){
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }

                this.modal_add = true
                this.formAdd.messageId = row.messageId
                this.formAdd.userId = row.userId
                this.formAdd.userName = row.userName
            },
            handleSubmit() {
                this.$refs['formAdd'].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        this.request({
                            url: '/message/send/user',
                            method: 'post',
                            data: JSON.stringify(this.formAdd),
                        }).then(res => {
                            this.$Message.success(res.msg);
                            this.refreshData()
                        }).finally(() => {
                            this.loading = false
                        })
                    } else {
                        this.$Message.error('填写内容不符合要求!');
                    }
                })
            },


            //tab2的方法
            query2() {
                this.loading = true  //显示表格加载动画
                this.request({
                    url: '/message/backend/read',
                    method: 'get',
                    params: {page: this.current2, size: this.pageSize2}
                }).then(res => {
                    this.data2 = res.data.content
                    this.pageData2 = res.data
                }).finally(() => {
                    this.loading = false
                })
            },
            change2(current) {
                this.current2 = current;
                this.refreshData2();
            },
            refreshData2() {
                //刷新数据
                //判断当前页面是不是搜索模式
                if (this.isSearch2) {
                    this.querySearch2();
                } else {
                    this.query2();
                }
            },
            on_select2(selection, row) {
                this.selectIds2.push(row.messageId)
                this.del_disabled2 = false //去掉删除按钮的禁用状态
            },
            on_select_cancel2(selection, row) {
                this.selectIds2.forEach((t, index, arr) => {
                    if (row.messageId === t) {
                        arr.splice(index, 1);    //删除取消的选项
                    }
                })
                if (this.selectIds2.length === 0) {
                    this.del_disabled2 = true //删除按钮的禁用状态
                }
            },
            on_select_all2(selection) {
                selection.forEach((t, index, arr) => {
                    this.selectIds2.push(t.messageId)
                })
                this.del_disabled2 = false //去掉删除按钮的禁用状态
            },
            on_select_all_cancel2(selection) {
                this.selectIds2 = []
                this.del_disabled2 = true //删除按钮的禁用状态
            },
            deleteList2() {
                if (!this.$store.state.isAdmin){
                    this.$Message.error('你没有此操作权限!');
                    return;
                }

                this.$Modal.confirm({
                    title: '提醒',
                    content: '确定要删除所选中的所有出入记录数据？',
                    onOk: () => {
                        this.loading = true
                        this.request({
                            url: '/message/list',
                            method: 'delete',
                            params: {ids: this.selectIds2},
                            paramsSerializer: params => {
                                return this.$qs.stringify(params, {indices: false})
                            }
                        }).then(res => {
                            this.$Message.info(res.msg);
                            this.refreshData2(); //更新当前页面
                        }).finally(() => {
                            this.loading = false
                        })
                    },
                    onCancel: () => {
                        this.$Message.info('已取消删除');
                    }
                });
            },
            //重置按键
            handleReset2() {
                this.search2 = {
                    userName: '',
                    title: '',
                    dates: [],
                    status: '1',
                    page: 1,
                    size: 10,
                    isAsc: 1,
                    field: ''
                }
                //重置页面
                this.isSearch2 = false
                this.current2 = 1
                this.query2()
            },
            searchSubmit2() {
                //条件搜索
                this.current2 = 1
                this.isSearch2 = true
                this.querySearch2();
            },
            querySearch2() {
                this.loading = true
                let dates = this.search2.dates
                if (dates.length < 2) {
                    this.search2.dates = ['', '']
                }
                if (dates.length === 2) {
                    this.search2.dates = [dateToString(dates[0]), dateToString(dates[1])]
                }
                this.search2.page = this.current
                this.search2.size = this.pageSize

                this.request({
                    url: '/message/search',
                    method: 'get',
                    params: this.search2,
                    paramsSerializer: params => {
                        return this.$qs.stringify(params, {indices: false})
                    }
                }).then(res => {
                    this.data2 = res.data.content
                    this.pageData2 = res.data
                    // console.log(this.data)
                }).finally(() => {
                    this.loading = false
                })
            },
            exportExcel2(){
                exportExcel('/message/export/excel',this.selectIds2)
            }
        }
    }
</script>

<style scoped>

</style>